<template>
	<view class="container">
		<u-navbar title="编辑地址"></u-navbar>
		<view class="content">
			<view class="item">
				<view class="title">收货人</view>
				<view class="item-input"><input class="input" v-model="dataForm.receiverName" type="text" placeholder="请输入收货人（必须是中文）" /></view>
			</view>
			<view class="item">
				<view class="title">手机号码</view>
				<view class="item-input"><input class="input" v-model="dataForm.phone" type="text" placeholder="请输入手机号码" /></view>
			</view>
			<view class="item-left" @click="onSelectCity">
				<view class="title">所在城市</view>
				<view class="item-right">></view>
			</view>
			<view class="item-left" @click="onSelectCityStreet">
				<view class="title">街道</view>
				<view class="item-right" >></view>
			</view>
			<view class="item">
				<view class="title">详细地址</view>
				<view class="item-input"><input class="input" v-model="dataForm.detail" type="text" placeholder="请输入收货地址" /></view>
			</view>
			<view class="item">
				<view class="title">邮政编码</view>
				<view class="item-input"><input class="input" v-model="dataForm.zipCode" type="text" placeholder="请输入邮政编码" /></view>
			</view>
			<view class="item-left">
				<view class="title">设为默认地址</view>
				<view class="item-right"><u-switch v-model="checked" active-color="#E04040" active-value="1" inactive-value="0" @change="onSwitch"></u-switch></view>
			</view>
		</view>
		<button class="btn" type="default" @click="onSubmit">保存收货地址</button>
		<!-- 地址选择器 -->
		<address-select ref="address" :add="add" @change="onChangeAddress"></address-select>
	</view>
</template>

<script>
import AddressSelect from './component/address-select.vue';
import { validatePhone } from '@/utils/validate.js';
export default {
	data() {
		return {
			checked: false, //默认的滑块
			dataForm: {
				addressCode: '',
				id: '',
				address: '', //全地址汉字
				detail: '', //详细地址
				cityCode: '', //市编码
				cityName: '', //市
				districtCode: '', //区编码
				districtName: '', //区
				isDefault: '0', //是否默认
				phone: '', //收货人手机号编码
				provinceCode: '', //省份编码
				provinceName: '', //省份
				receiverName: '', //收货人
				subdistrictCode: '', //街道编码
				subdistrictName: '', //街道
				zipCode: '' //邮编
			}
		};
	},
	components: {
		AddressSelect
	},

	onLoad(options) {},

	methods: {
		// 点击开关
		onSwitch(value) {
				this.dataForm.isDefault = value;
			console.log(value, '切换地址');
		},
		// 提交
		async onSubmit() {
			let params = this.dataForm;
			if (!params.receiverName) {
				return this.$message('请输入收货人');
			}
			let reg = /^[\u4e00-\u9fa5]+$/;
			if (!reg.test(params.receiverName)) {
				return this.$message('收货人必须是2至5位中文');
			}
			if (!validatePhone(params.phone)) {
				return this.$message('请输入正确的手机号');
			}
			if (!params.districtName) {
				return this.$message('请选择收货地址');
			}
			if (!params.detail) {
				return this.$message('请填写详细地址');
			}
			//重写address 地址
			params.address = params.provinceName + ',' + params.cityName + ',' + params.districtName + ',' + params.subdistrictName;
		
			if (this.dataForm.id) {
				// await setAddressPut(this.$filterObj(params)).then(res => {
				// 	this.$message('修改成功');
				// });
			} else {
				// await setAddress(this.$filterObj(params)).then(res => {
				// 	this.$message('添加成功');
				// });
			}
			if (!params.detail) {
				return this.$message('请填写详细地址');
			}
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			prevPage.$vm.getDataList();
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		},
		// 选择城市
		onSelectCity() {
			this.$refs['address'].show({ districtCode: this.dataForm.districtCode, addressCode: this.addressCode });
		},
		// 选择街道
		onSelectCityStreet() {
			
			this.$refs['address'].showTwo({ districtCode: this.dataForm.districtCode, addressCode: this.addressCode });
		},
		
	}
};
</script>

<style lang="scss">
@import '@/styles/mixin.scss';
.container {
	min-height: 100%;
	background-color: #f5f5f5;
	padding-bottom: 130rpx;
	.content {
		width: 100%;
		margin-top: 20rpx;
		.item {
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: baseline;
			border-bottom: 1rpx solid #eeeeee;
			background: #ffffff;
			.title {
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				padding: 20rpx;
			}
			.item-input {
				padding-left: 20rpx;
				.input {
					width: 500rpx;
				}
			}
		}
		.item-left {
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: baseline;
			border-bottom: 1rpx solid #eeeeee;
			background: #ffffff;
			justify-content: space-between;
			.title {
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				padding: 20rpx;
			}

			.item-right {
				padding-right: 20rpx;
			}
		}
	}
	.btn {
		position: fixed;
		left: 50%;
		bottom: 20rpx;
		width: 90%;
		transform: translateX(-50%);
		border-radius: 60rpx;
		padding: 6rpx;
		color: #ffffff;
		background-color: #ed3f14;
	}
}
</style>
